<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const inventors = [
            { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
            { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
            { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
            { first: 'Marie', last: 'nextie', year: 1867, passed: 1934 },
            { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
            { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
            { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
            { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
            { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
            { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
            { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
            { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
        ];

        const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];

        const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];

        // Array.prototype.filter()
        // 1. (筛选 16 世纪出生的发明家) Filter the list of inventors for those who were born in the 1500's
        {
            const result = inventors.filter((item) => item.year > 1500 && item.year < 1600);
            console.log(result);
        }


        // Array.prototype.map()
        // 2. Give us an array of the inventors' first and last names
        // 2. 展示他们的姓和名
        {
            const result = inventors.map((item) => `${item.first} ${item.last}`);
            console.log(result);
        }

        // Array.prototype.sort()
        // 3. Sort the inventors by birthdate, oldest to youngest
        // 3. 把他们按照出生日期从大到小进行排序
        {
            inventors.sort((prev, next) => prev.year > next.year ? 1 : prev.year < next.year ? -1 : 0); // 不交换为负
            console.log(inventors);
        }

        // Array.prototype.reduce()
        // 4. How many years did all the inventors live?
        // 4. 计算所有的发明家加起来一共活了多少岁
        {
            // reduce()回调第一个参数为当前归并值
            const result = inventors.reduce((total, next) => (total + (next.passed - next.year)), 0);
            console.log(result);
        }

        // 5. Sort the inventors by years lived
        // 5. 按照他们活了多久来进行排序
        {
            inventors.sort((prev, next) => {
                const prevOld = prev.passed - prev.year;
                const nextOld = next.passed - next.year;
                return prevOld > nextOld ? -1 : prevOld < nextOld ? 1 : 0;
            });
            console.log(inventors);
        }

        // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
        // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
        // 6. 筛选出一个网页里含有某个词语的标题（网站需翻墙, 无法完成）
        // 下面是我在豆瓣里筛选书名里含有 CSS 的书的代码
        // https://book.douban.com/tag/web
        {
            // 打开该网址调试
            const links = Array.from(document.querySelectorAll('.subject-list h2 a'));
            const book = links
                .map(link => link.title)
                .filter(title => title.includes('CSS'));
            console.log(book);
        }

        // 7. sort Exercise
        // Sort the people alphabetically by last name
        // 7. 按照姓氏来对people进行排序
        {
            people.sort((prev, next) => {
                const [prevFirst, prevLast] = prev.split(','); // 把姓名分割成含有两个字符串
                const [nextFirst, nextLast] = next.split(',');
                return prevLast < nextLast ? -1 : 1;
            });
            console.log(people);
        }

        // 8. Reduce Exercise
        // Sum up the instances of each of these
        // 8. 统计各个物品的数量
        {
            // 利用对象来存储数量
            const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'];
            const result = data.reduce((obj, item) => {
                if (!obj[item]) obj[item] = 0; // 判断是否已存在该属性, 不存在则新建一个属性, 初始值为0
                obj[item]++; // 存在则累加
                return obj;
            }, {}); // 以空对象作为初始值
            console.log(result);
        }
    </script>
</body>

</html>